<template>
  <div
    id="eidt"
    style="background-color: #f4f4f4"
  >
    <Hometop></Hometop>
    <div class="textipt">
      <p>头像</p>
      <p>
        <img
          src="../../../static/images/pepole.png"
          alt=""
          style="border-radius: 100px; margin-top: 2px; margin-right: 70px"
        />
      </p>
    </div>
    <div class="textipt_p">
      <p>昵称</p>
      <p><input
          type="text"
          :placeholder="$store.state.name"
        /></p>
    </div>
    <div class="textipt_p">
      <p>UID</p>
      <p><input
          type="text"
          :placeholder="placeholder[1]"
        /></p>
    </div>
    <div class="textipt_p">
      <p>性别</p>
      <p><input
          type="text"
          :placeholder="placeholder[2]"
        /></p>
    </div>
    <div class="textipt_p">
      <p>出生日期</p>
      <p><input
          type="text"
          :placeholder="placeholder[3]"
        /></p>
    </div>
    <div class="textipt_p">
      <p>个性签名</p>
      <p><input
          type="text"
          v-model="model"
          :placeholder="placeholder[4]"
        /></p>
    </div>
    <div
      class="textipt_p_p"
      style="margin-top: 20px"
    >
      <span @click="handletextClick">退出登录</span>
    </div>
    <div class="textipt_p_p">
      <span @click="handletextClick2">返回空间</span>
    </div>
  </div>
</template>
<script>
import Hometop from '../../../components/common/Hometop'
export default {
  data: () => ({
    placeholder: ['大爱南拳', '318387119', '男', '1999-1-10', '用这种方式存在！！'],
    model: ''
  }),
  methods: {
    handletextClick () {
      window.sessionStorage.clear('token', 'name', 'id')
      this.$router.go('/home')
    },
    handletextClick2 () {
      this.$router.push('/home/myselfdata')
    }
  },
  components: {
    Hometop
  }
}
</script>
<style lang="scss" scoped>
.textipt {
  font-size: 14px;
  margin-top: 60px;
  display: flex;
  justify-content: space-between;
  height: 52px;
  border-bottom: 1px solid #ccc;
  p:first-child {
    line-height: 52px;
    text-indent: 10px;
  }
}
.textipt_p {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  height: 35px;
  border-bottom: 1px solid #ccc;
  p:first-child {
    line-height: 35px;
    text-indent: 10px;
  }
  input {
    margin-top: 8px;
    border: none;
    background-color: #f4f4f4;
    width: 100px;
    margin-right: 20px;
  }
}
.textipt_p_p {
  font-size: 14px;
  justify-content: space-between;
  height: 35px;
  border-bottom: 1px solid #ccc;
  text-align: center;
  line-height: 35px;
  background-color: #fff;
  color: #505050;
}
</style>
